---
title: Warp Background
date: 2024-12-24
description: A card with a time warping background effect.
author: magicui
published: true
---

<ComponentPreview name="warp-background-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/warp-background
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="warp-background" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { WarpBackground } from "@/components/ui/warp-background"
```

```tsx showLineNumbers
<WarpBackground>
  <div className="w-80">
    <p>Warp Background</p>
    <p>This is a component that creates a warp background effect.</p>
  </div>
</WarpBackground>
```

## Props

| Prop           | Type              | Default           | Description                                     |
| -------------- | ----------------- | ----------------- | ----------------------------------------------- |
| `children`     | `React.ReactNode` | `-`               | The content to be put inside the warp animation |
| `perspective`  | `number`          | `100`             | The perspective of the warp animation           |
| `beamsPerSide` | `number`          | `3`               | The number of beams per side                    |
| `beamSize`     | `number`          | `5`               | The size of the beams                           |
| `beamDelayMax` | `number`          | `3`               | The maximum delay of the beams                  |
| `beamDelayMin` | `number`          | `0`               | The minimum delay of the beams                  |
| `beamDuration` | `number`          | `3`               | The duration of the beams                       |
| `gridColor`    | `string`          | `"var(--border)"` | The color of the grid lines                     |
